<a class="cpy-card tour--card issue--card show-issue-finish-toggle-on-hover"
  id="<%= dom_id(issue) %>"
  href="<%= show_visualization_issue_path(visualization, issue) %>"
  data-controller="visualization--board--card"
  data-favorite-issue-labels-issue-id="<%= issue.id %>"
  data-visualization--board--card-scroll-on-connect-value="<%= local_assigns[:scroll_on_connect] == true %>"
  data-grouping-column-target="card"
  data-grouping-column-issue-id-value="<%= issue.id %>"
  data-visualization--issue-filtering-target="issue"
  data-turbo-frame="issue_detail"
  data-turbo-action="advance"
  >
  <div class="issue--card-inner">

    <div class="issue--card-edit">
      <i class="ti ti-pencil"></i>
    </div>

    <div class="flex flex-nowrap">
      <%= render(Issue::FinishToggleComponent.new(issue: issue)) %>

      <p class="issue--title font-normal grow break-all" data-issue-title>
        <%= issue.title %>
      </p>
    </div>

    <%= labels_list_for(issue) %>

    <%= render partial: 'visualizations/groupings/_card/icons', locals: { issue: } %>

    <%= due_date_for(issue) %>
  </div>
</a>
